{extend name="../../admin/view/public/admin"}
{block name='content'}
<style>
    .input-string-width {
        width: 200px;
    }

    .region-goods {
        background: #f8f8f8;
        margin-bottom: 10px;
        padding: 0 10px;
    }

    .region-goods-left {
    }

    .region-goods-right {
        border-left: 3px solid #fff;
        padding: 10px 10px;
    }

    .region-inner {
        text-align: center;
        font-weight: bold;
        color: #333;
        font-size: 14px;
        padding: 20px 0;
    }

    .pointer{
        cursor: pointer;
    }
</style>

<div class="page-header">
    当前位置：<span>首页</span><span class="icon icon-angle-double-right" style="margin: 0 5px"></span><span>商品管理</span><span class="icon icon-angle-double-right" style="margin: 0 5px"></span><span>发布商品</span>
</div>

<div class="page-content">

    <div class="row">
        <div class="col-md-12" style="margin-bottom: 50px;">

            <ul class="nav nav-tabs" id="myTab" style="width:100%;display: flex;">
                <li id="basic_li" class="{if $_GET['tab']=='basic' || empty($_GET['tab'])}active{/if}" data-type="basic" style="flex: 1; text-align: center"><a href="#tab_basic">基本信息</a></li>
                <li class="{if $_GET['tab']=='param'}active{/if}" data-type="param" style="flex: 1; text-align: center"><a href="#tab_param">商品参数</a></li>
                <li id="detail_li" class="{if $_GET['tab']=='detail'}active{/if}" data-type="detail" style="flex: 1; text-align: center" class=""><a href="#tab_detail">商品详情</a></li>
            </ul>

            <form action="" method="post" enctype="multipart/form-data" class="form-horizontal form-validate">
                <input type="hidden" id="tab" name="tab" value="{if empty($_GET['tab'])}#tab_basic{else}#tab_{$_GET['tab']}{/if}" />
                <div class="tab-content">

                    <input type="hidden" name="id" value="{$_GET['id']}">
                    <input type="hidden" id="tab" value="list">

                    <!--商品基本信息-->
                    <div class="tab-pane {if $_GET['tab']=='basic' || empty($_GET['tab'])}active{/if}" id="tab_basic">
                        <div class="panel-body region-goods">{include file='web/goods/index/tab/basic'}</div>
                    </div>

                    <!--商品参数-->
                    <div class="tab-pane {if $_GET['tab']=='param'}active{/if}" id="tab_param">
                        <div class="panel-body region-goods">{include file='web/goods/index/tab/param'}</div>
                    </div>

                    <!--商品详情-->
                    <div class="tab-pane {if $_GET['tab']=='detail'}active{/if}" id="tab_detail">
                        <div class="panel-body region-goods">{include file='web/goods/index/tab/content'}</div>
                    </div>

                    <div class="tab-footer col-md-12">
                        <input type="submit" value="保存商品" class="btn btn-primary btn-lg"/>
                        <a href="javascript:void(0);" class="btn btn-default btn-lg" onclick='history.back()' style='margin-left:10px;'>返回列表</a>
                    </div>

                </div>

            </form>

        </div>
    </div>
</div>

<script type="text/javascript">

    require(['jquery.ui'], function () {
        $('.multi-img-details').sortable({scroll: 'false'});
    });

    require(['bootstrap'], function () {
        $('#myTab a').click(function (e) {
            $('#tab').val( $(this).attr('href'));
            e.preventDefault();
            $(this).tab('show');
        })
    });

    $(function () {

        /*
        * 商品类型选择
        * */
        $("input[name=type]").off("click").on("click", function () {
            let goodsType = $(this).val();

            if (goodsType == 1) { // 实体商品
                $("#specs_li").show();
                $("#chapters_li").hide();
                // $("#selectTeacher").hide();
            } else {
                if (goodsType == 2) { // 课程
                    $("#specs_li").hide();
                    $("#chapters_li").show();
                    // $("#selectTeacher").show();
                }
            }
        });

        $('form').submit(function(){
            let goodsname = $("#goodsname").val();
            let app_identifier = $("#app_identifier").val();
            let thumb = $("input[name='thumb']").val();
            let marketprice = parseFloat($("#marketprice").val()).toFixed(2);

            $('form').attr('stop',0);

            if (goodsname == undefined || goodsname == '') {
                $('#myTab a[href="#tab_basic"]').tab('show');
                $('form').attr('stop',1);
                $(this).focus(),$('form').attr('stop',1),tip.msgbox.err('请填写商品名称!');
                return false;
            }

            if (thumb == undefined) {
                $('#myTab a[href="#tab_basic"]').tab('show');
                $('form').attr('stop',1);
                $(this).focus(),$('form').attr('stop',1),tip.msgbox.err('请填写商品图片!');
                return false;
            }

            if (marketprice <= 0 || isNaN(marketprice)) {
                $('#myTab a[href="#tab_basic"]').tab('show');
                $('form').attr('stop',1);
                $(this).focus(),$('form').attr('stop',1),tip.msgbox.err('请填写商品售价!');
                return false;
            }
        });

        require(['jquery.ui'], function () {
            $('#chapters').sortable({
                stop: function () {
                    refreshOptions();
                }
            });
            $('.chapter_item_items').sortable(
                {
                    handle: '.fa-arrows',
                    stop: function () {
                        refreshOptions();
                    }
                }
            );
        });

    });
</script>
{/block}